<!--
 * @Author: denghuan
 * @LastEditors: denghuan
 * @LastEditTime: 2022-11-23 12:47:02
 * @Description: h5播放器
-->
<template>
  <div
    :id="sid"
    :style="`width:${width};height:${height}`"
    class="videoPlayer"
  />
</template>
<script>
import { getPreviewVideoUrl as getPreviewUrl } from '@/api/armyScreenApi.js'

export default {
  props: {
    camera: {
      type: Object,
      default: function () {
        return {}
      }
    },
    url: {
      type: String,
      default: ''
    },
    indexcode: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      sid: Math.floor(Math.random() * 100000000000000),
      h5Plugin: null,
    }
  },
  computed: {
    protocol () {
      // return 'wss'
      return window.location.protocol === 'https:' ? 'wss' : 'ws'
    }
  },
  watch: {
    indexcode: function (newV) {
      if (newV) {
        this.play()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initPlugin()
      this.play()
    })
  },
  beforeUnmount () {
    this.stopPlay()
    this.h5Plugin = null
  },
  methods: {
    initPlugin () {
      console.log(`/${import.meta.env.VITE_APP_CONTEXT}/h5player/`);
      this.h5Plugin = new JSPlugin({ // eslint-disable-line
        szId: this.sid,
        iMaxSplit: 1,
        iCurrentSplit: 1,
        szBasePath: `/${import.meta.env.VITE_APP_CONTEXT}/h5player/`,
        // szBasePath: `${process.env.VUE_APP_CONTEXT}/static/h5player/`,
        oStyle: {
          border: 'transparent',
          borderSelect: 'transparent'
        }
      })
    },
    async play () {
      // if (!this.indexcode) {
      //   return
      // }
      if (!this.h5Plugin) {
        this.initPlugin()
      }
      const paramObj = {
        cameraIndexCode: this.camera.indexCode,
      }
      const { data } = await getPreviewUrl(paramObj)
      // const data = {
      //   "streamDispatchMode": "0",
      //   "url": "ws://10.192.195.225:559/EUrl/mKxmsPm"
      // }
      const playURL = data.url
      console.log('playURL', playURL)
      // 高级模式采用的是软解，用的是海康播放库，所以在性能上远低于普通模式，但是在功能上较丰富，可扩展性强。
      // 普通模式采用的是硬解，用的是浏览器的video标签播放，所以性能上远高于高级模式，但是有较大局限性，只支持h264，并且功能单一。
      this.h5Plugin.JS_Play(
        playURL,
        {
          playURL,
          mode: 0 // 解码类型：0=普通模式; 1=高级模式
        },
        0 // 当前窗口下标
      ).then(
        () => { console.info('JS_Play success') },
        err => { console.info('JS_Play failed:', err) }
      )
    },
    stopPlay () {
      console.log('this.h5Plugin', this.h5Plugin)
      // console.log('h5Plugin.JS_Stop', h5Plugin.JS_Stop)
      if (this.h5Plugin) {
        this.h5Plugin.JS_Stop(0).then(
          () => { console.info('JS_Stop success') },
          err => { console.info('JS_Stop failed:', err) }
        )
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.videoPlayer {
  width: 100%;
  height: 100%;
}
</style>
